<template>
  <div class="feeling-picker-wapper" v-show="showPicker">
    <van-picker
      class="feeling-picker"
      :class="{'close-picker': !showPicker}"
      :title="title"
      show-toolbar
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
    />
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default: () => ["12", "18", "24", "36"]
    },
    title: {
      type: String,
      default: "标题"
    }
  },
  data() {
    return {
      showPicker: false
    };
  },
  methods: {
    onConfirm(value, index) {
      this.$emit("input", false);
      this.$emit("confirm", value, index);
    },
    onChange(picker, value, index) {
      this.$emit("change", picker, value, index);
    },
    onCancel() {
      this.$emit("input", false);
      this.$emit("cancel");
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.showPicker = newVal;
      }
    }
  }
};
</script>

<style lang='less' scoped>
.feeling-picker-wapper {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  z-index: 99;
  @keyframes picker-animation {
    0% {
      transform: translateY(242%);
    }
    100% {
      transform: translateY(141%);
    }
  }
  @keyframes close-picker-animation {
    0% {
      transform: translateY(141%);
    }
    100% {
      transform: translateY(242%);
    }
  }
  .feeling-picker {
    // transform: translateY(242%);
    transform: translateY(141%);
    animation: picker-animation linear 0.3s;
  }
  .close-picker {
    transform: translateY(242%);
    animation: close-picker-animation linear 0.4s;
  }
}
</style>